前言

展開運算子與其餘參數是 ES6 新增的兩個特性，使用上都一樣是 ... 也就是三個點，不過實際上這兩個方法代表的意義會不太一樣，接下來一一介紹。

展開運算子 (Spread syntax)

展開運算子是主要用在陣列上的運算子，在實做中這個方法其實滿常用的，而他的概念正如名稱一樣，將資料展開，並且一一取得該陣列的值，在過去若想將陣列資料傳至另一個陣列資料時，我們會使用 .contant() 方法比如：

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
array1 = array1.concat(array2)
console.log(array1)

要達成這個需求，現在則可以使用展開運算子達成：

var array1 = ['a', 'b', 'c' ];
var array2 = ['d', 'e', 'f'];
array1 =  [...array1, ...array2]
console.log(array1) //(6) ['a', 'b', 'c', 'd', 'e', 'f']

這樣看或許還對這個功能感到有些模糊，這時直接使用 console.log( ...array1 ) ，變可以明白他其實就是將陣列中的值一一的使用並 return 出來。

淺層複製

從上面說明也可以明白，展開運算子，也可用於複製陣列上，若使用 展開運算子 複製陣列時他是屬於淺層複製的一種，如果是淺層複製的陣列，他們第一層的參考會是不同的，也就是不會影響原始物件，例如：

var array1 = ['a', 'b', 'c' ]
var array2 = [ ... array1 ]
array2.push('d')
console.log(array1)  // ['a', 'b', 'c']

而非淺層複製就會使用共同參考:

var array1 = ['a', 'b', 'c' ]
var array2 = array1
array2.push('d')
console.log(array1)  // ['a', 'b', 'c', 'd']

上面範例雖然都用在陣列上，但其實如果只是要使用複製功能，物件也能使用這個方法，例如：

var obj1 = { name1:'Ryder', name2:'Jack', name3:'Annie'}
var obj2 = { ...obj1 }
console.log( obj2 ) // { name1:'Ryder', name2:'Jack', name3:'Annie'}

類陣列轉成純陣列

展開運算子還有一個功能，就是將類陣列轉換成純陣列，JS 某些語法會創造出的類陣列（非完全陣列沒有完整的陣列原型），例如

• 函式中的 arguments 參數：

function Fn1(){
	console.log(arguments)
	console.log( [...arguments] )
}
Fn1(1,2,3)

• document.querySelectorAll() 等等的取得 DOM 元素的方法：

const buttons = document.querySelectorAll('button')
console.log( buttons )
console.log( [...buttons] )

其餘參數 (rest parameter)

若要使用其餘參數，我們可以在函式參數打上 ...arg (名稱可自訂），這樣便是使用其餘參數的功能。
上面剛好有提到，函式的 arguments 參數，而其餘參數其實就跟 arguments 參數非常相像，就是將所有參數，使用陣列包起來呈現，而這兩個寫法主要差別有兩點：

• arguments 是類陣列、其餘參數 是真正的陣列。
• 有寫上自定義參數時 arguments 並不會自動配合參數給予剩餘值，而其餘參數寫法會自動調配。

// 其餘參數，顯示剩餘參數的所有值。
function Fn1( num, ...arg  ){
	console.log(num, arg) // 1 , [2, 3]
}
Fn1(1,2,3)

// arguments 只會顯示該函式所有參數，不會自動調配。
function Fn2( num, ...arg  ){
	console.log(num, arg) // 1  [1, 2, 3]
}
Fn2(1,2,3)

參考文獻

• 鐵人賽：JavaScript 展開與其餘